<template>
	<view class="page">
		<view class="distribution-summary bg-w pd30 mb20">
			<view class="summary-header">
				<view class="avatar-section">
					<app-icon :name="memberInfo.face || 'https://picsum.photos/100'" type="image" custom-class="avatar" />
					<view class="level-badge">分销商</view>
				</view>
				<view class="summary-info">
					<view class="welcome-text">欢迎回来，{{memberInfo.name}}</view>
					<view class="join-time">加入时间：{{joinTime}}</view>
				</view>
			</view>
			
			<view class="summary-stats">
				<view class="stat-item">
					<text class="value">{{distributionStats.totalGoods}}</text>
					<text class="label">分销商品</text>
				</view>
				<view class="stat-item">
					<text class="value">{{distributionStats.totalOrders}}</text>
					<text class="label">分销订单</text>
				</view>
				<view class="stat-item">
					<text class="value">¥{{distributionStats.totalCommission}}</text>
					<text class="label">总佣金</text>
				</view>
				<view class="stat-item">
					<text class="value">{{distributionStats.teamSize}}</text>
					<text class="label">团队人数</text>
				</view>
			</view>
		</view>
		
		<view class="bg-w pd30 mb20">
			<view class="section-title">推广收益</view>
			<view class="income-cards">
				<view class="income-card">
					<view class="income-amount">¥{{todayIncome}}</view>
					<view class="income-label">今日收益</view>
				</view>
				<view class="income-card">
					<view class="income-amount">¥{{monthIncome}}</view>
					<view class="income-label">本月收益</view>
				</view>
				<view class="income-card">
					<view class="income-amount">¥{{yesterdayIncome}}</view>
					<view class="income-label">昨日收益</view>
				</view>
			</view>
		</view>
		
		<view class="bg-w pd30 mb20">
			<view class="section-header">
				<view class="section-title">我的分销商品</view>
				<view class="more-btn" @click="viewAllGoods">
					<text>查看全部</text>
					<text class="iconfont iconbtn_more"></text>
				</view>
			</view>
			
			<view class="distribution-goods">
				<view v-for="(item, index) in myGoods" :key="index" class="goods-item" @click="viewGoods(item.id)">
					<image :src="item.image" mode="aspectFill" class="goods-image"></image>
					<view class="goods-info">
						<view class="goods-title">{{item.title}}</view>
						<view class="goods-commission">
							<text class="commission-label">佣金：</text>
							<text class="commission-value">{{item.commission_rate}}%</text>
						</view>
						<view class="goods-stats">
							<text class="stat">销量{{item.sales}}</text>
							<text class="stat">佣金¥{{item.commission}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="myGoods.length === 0" class="empty-goods">
				<view class="empty-text">暂无分销商品</view>
				<button class="btn-main" @click="goDistribution">去选品</button>
			</view>
		</view>
		
		<view class="bg-w pd30 mb20">
			<view class="section-header">
				<view class="section-title">团队管理</view>
				<view class="more-btn" @click="viewTeam">
					<text>查看团队</text>
					<text class="iconfont iconbtn_more"></text>
				</view>
			</view>
			
			<view class="team-info">
				<view class="team-stats">
					<view class="team-stat">
						<text class="value">{{teamStats.directCount}}</text>
						<text class="label">直推人数</text>
					</view>
					<view class="team-stat">
						<text class="value">{{teamStats.indirectCount}}</text>
						<text class="label">间推人数</text>
					</view>
					<view class="team-stat">
						<text class="value">¥{{teamStats.teamCommission}}</text>
						<text class="label">团队佣金</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="quick-actions bg-w pd30 mb20">
			<view class="section-title">快捷功能</view>
			<view class="action-grid">
				<view class="action-item" @click="goPromotion">
					<text class="action-icon">🎯</text>
					<text class="action-label">推广工具</text>
				</view>
				<view class="action-item" @click="goEarnings">
					<text class="action-icon">💰</text>
					<text class="action-label">推广收益</text>
				</view>
				<view class="action-item" @click="goCommission">
					<text class="action-icon">📊</text>
					<text class="action-label">佣金明细</text>
				</view>
				<view class="action-item" @click="goTutorial">
					<text class="action-icon">📚</text>
					<text class="action-label">分销教程</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {
			joinTime: '2024-01-01',
			distributionStats: {
				totalGoods: 15,
				totalOrders: 68,
				totalCommission: '2,580.50',
				teamSize: 23
			},
			todayIncome: '126.80',
			monthIncome: '1,890.30',
			yesterdayIncome: '89.60',
			teamStats: {
				directCount: 12,
				indirectCount: 11,
				teamCommission: '890.50'
			},
			myGoods: [
				{
					id: 1,
					title: '豪华双人汉堡套餐',
					commission_rate: 25,
					image: 'https://picsum.photos/seed/mygoods1/100/100.jpg',
					sales: 23,
					commission: '229.25'
				},
				{
					id: 2,
					title: '专业SPA护理套餐',
					commission_rate: 20,
					image: 'https://picsum.photos/seed/mygoods2/100/100.jpg',
					sales: 15,
					commission: '564.00'
				},
				{
					id: 3,
					title: '健身房月卡',
					commission_rate: 15,
					image: 'https://picsum.photos/seed/mygoods3/100/100.jpg',
					sales: 18,
					commission: '809.10'
				}
			]
		};
	},
	computed: {
		...mapState(['memberInfo']),
		isLogin() {
			return this.memberInfo == null ? false : true;
		}
	},
	onLoad() {
		this.loadDistributionData();
	},
	methods: {
		loadDistributionData() {
			// 实际项目中这里会调用API
		},
		
		viewAllGoods() {
			uni.navigateTo({
				url: '/pages/distribution/products'
			});
		},
		
		viewGoods(id) {
			uni.navigateTo({
				url: `/pages/goods/detail?id=${id}`
			});
		},
		
		viewTeam() {
			uni.navigateTo({
				url: '/pages/distribution/team'
			});
		},
		
		goDistribution() {
			uni.navigateTo({
				url: '/pages/distribution/products'
			});
		},
		
		goPromotion() {
			uni.showToast({ title: '推广工具开发中', icon: 'none' });
		},
		
		goEarnings() {
			uni.navigateTo({
				url: '/pages/distribution/earnings'
			});
		},
		
		goCommission() {
			uni.navigateTo({
				url: '/pages/distribution/commission'
			});
		},
		
		goTutorial() {
			uni.showModal({
				title: '分销教程',
				content: '1. 选择商品进行分销\n2. 使用推广工具分享\n3. 获得佣金收益\n4. 查看收益明细',
				showCancel: false
			});
		}
	}
};
</script>

<style>
.distribution-summary {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border-radius: 12rpx;
}

.summary-header {
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
}

.avatar-section {
	position: relative;
	margin-right: 20rpx;
}

.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	border: 3rpx solid white;
}

.level-badge {
	position: absolute;
	bottom: -5rpx;
	right: -5rpx;
	background: #ffa502;
	color: white;
	font-size: 20rpx;
	padding: 2rpx 8rpx;
	border-radius: 8rpx;
}

.summary-info {
	flex: 1;
}

.welcome-text {
	font-size: 28rpx;
	font-weight: 600;
	margin-bottom: 8rpx;
}

.join-time {
	font-size: 24rpx;
	opacity: 0.9;
}

.summary-stats {
	display: flex;
	justify-content: space-around;
}

.stat-item {
	text-align: center;
}

.stat-item .value {
	display: block;
	font-size: 28rpx;
	font-weight: 600;
	margin-bottom: 8rpx;
}

.stat-item .label {
	font-size: 24rpx;
	opacity: 0.9;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
}

.more-btn {
	display: flex;
	align-items: center;
	color: #666;
	font-size: 24rpx;
}

.income-cards {
	display: flex;
	justify-content: space-between;
}

.income-card {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
	background: #f8f9fa;
	border-radius: 12rpx;
	margin: 0 10rpx;
}

.income-card:first-child {
	margin-left: 0;
}

.income-card:last-child {
	margin-right: 0;
}

.income-amount {
	font-size: 32rpx;
	color: #ff4757;
	font-weight: 600;
	margin-bottom: 8rpx;
}

.income-label {
	font-size: 24rpx;
	color: #666;
}

.distribution-goods {
	display: flex;
	overflow-x: auto;
	gap: 20rpx;
	padding: 10rpx 0;
}

.goods-item {
	flex-shrink: 0;
	width: 200rpx;
	background: #f8f9fa;
	border-radius: 12rpx;
	padding: 15rpx;
}

.goods-image {
	width: 100%;
	height: 150rpx;
	border-radius: 8rpx;
	margin-bottom: 15rpx;
}

.goods-title {
	font-size: 24rpx;
	color: #333;
	margin-bottom: 10rpx;
	line-height: 1.3;
}

.goods-commission {
	font-size: 22rpx;
	color: #ff6348;
	margin-bottom: 8rpx;
}

.goods-stats {
	font-size: 20rpx;
	color: #999;
}

.stat {
	margin-right: 10rpx;
}

.empty-goods {
	text-align: center;
	padding: 40rpx 0;
}

.empty-text {
	font-size: 26rpx;
	color: #999;
	margin-bottom: 20rpx;
}

.team-stats {
	display: flex;
	justify-content: space-around;
}

.team-stat {
	text-align: center;
}

.team-stat .value {
	display: block;
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 8rpx;
}

.team-stat .label {
	font-size: 24rpx;
	color: #666;
}

.action-grid {
	display: flex;
	justify-content: space-around;
	margin-top: 30rpx;
}

.action-item {
	text-align: center;
	padding: 20rpx;
}

.action-icon {
	font-size: 48rpx;
	margin-bottom: 10rpx;
	display: block;
}

.action-label {
	font-size: 24rpx;
	color: #666;
}
</style>